<script setup>
import { storeToRefs } from 'pinia';
const dayjs = useDayjs();

const urlHome = useUrl();

const props = defineProps({
	nkv: String,
})

// const image_list = ref([]);
const urlCutHome = ref('');
urlCutHome.value = 'http://192.168.100.48:8000';
const image_link = useModalImage();
const isOpen = ref(false);
// const image_link = useModalImage();
// const urlHome = useUrl();
const urlCutHome2 = urlHome.value.slice(0, urlHome.value.length - 1);

function openModalImage(image_url) {
	image_link.value = image_url;
	isOpen.value = true;
}

defineShortcuts({
	escape: {
		usingInput: true,
		whenever: [isOpen],
		handler: () => { isOpen.value = false }
	}
})

// const { data: photos } = await useFetch(urlHome.value + 'naryad/images_view_by_nkv/' + props.nkv + '/')

const { data: image_list } = await useFetch(`${urlHome.value}lab/image_list/`, {
	headers: {
		'Access-Control-Allow-Credentials': true,
		'Access-Control-Allow-Origin': '*',
		'Access-Control-Allow-Methods': 'GET',
		'Access-Control-Allow-Headers': 'application/json',
	},
	query: {
		naryad_nkv: props.nkv
	}
})


// async function getImagesList() {
// 	const { data: images } = await useLazyFetch(`${urlHome.value}lab/image_list/`, {
// 		headers: {
// 			'Access-Control-Allow-Credentials': true,
// 			'Access-Control-Allow-Origin': '*',
// 			'Access-Control-Allow-Methods': 'GET',
// 			'Access-Control-Allow-Headers': 'application/json',
// 		}
// 		onRequest({ request, options }) {
// 			//set the request headers
// 			options.headers = options.headers || {
// 				'Access-Control-Allow-Credentials': true,
// 				'Access-Control-Allow-Origin': '*',
// 				'Access-Control-Allow-Methods': 'GET',
// 				'Access-Control-Allow-Headers': 'application/json',
// 			};
// 			// pend.value = true;
// 		},
// 		onResponse({ request, response, options }) {
// 			image_list.value = response._data.image_list;
// 			// requestData2.value = response._data;
// 			// doc_inwork_nar.value = response._data.doc_inwork_nar;
// 			// techs_inwork_nar.value = response._data.techs_inwork_nar;
// 			// pend.value = false;
// 			return response._data
// 		}
// 	})
// 	return;
// }
// await getImagesList()

</script>

<template>
	<div class="px-2 grid grid-cols-4 gap-2 md:grid-cols-5 lg:grid-cols-5 ">
		<div v-for="image in image_list">
			<img :src="urlCutHome + image" @click="openModalImage(image)" alt="image" class="w-16 md:w-24 lg:w-28">
			<!-- <img :src="urlCutHome2 + image" @click="openModalImage(image)" alt="image" class="w-16 md:w-24 lg:w-28"> -->
		</div>
	</div>
	<!-- <UButton label="Open" @click="isOpen = true" /> -->
	<UModal v-model="isOpen">
		<img :src="urlCutHome + image_link.value" alt="image" class="min-height: 100%">
		<!-- <div class="modal-action">
			<label for="my-modal-6" class="btn">Ок!</label>
		</div> -->
	</UModal>
</template>